import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from '../store/features/counter'
// import { changeBanners, changeRecommends } from '../store/features/home'
import { fetchHomeMultidataAction } from "../store/features/home";
// import axios from 'axios';

export class Home extends PureComponent {
  subNumber(number){
    this.props.subNumber(number)
  }
  addNumber(number){
    this.props.addNumber(number)
  }
  componentDidMount(){
    /* axios.get('http://123.207.32.32:8000/home/multidata').then(res => {
      const banners = res.data.data.banner.list;
      const recommends = res.data.data.recommend.list;
      this.props.changeBanners(banners);
      this.props.changeRecommends(recommends);
    }) */
    this.props.fetchHomeMultidata();
  }
  render() {
    const { counter } = this.props;
    return (
      <div>
        <h2>Home Counter: {counter}</h2>
        <button onClick={() => this.subNumber(4)}>-4</button>
        <button onClick={()=>this.subNumber(7)}>-7</button>
        <button onClick={() => this.addNumber(9)}>+9</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter.value
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    subNumber: function(number){
      dispatch(decrement(number))
    },
    addNumber: function(number){
      dispatch(increment(number))
    },
    fetchHomeMultidata: function(){
      dispatch(fetchHomeMultidataAction())
    }
  /*   changeBanners: function(banners){
      dispatch(changeBanners(banners))
    },
    changeRecommends: function(recommends){
      dispatch(changeRecommends(recommends))
    } */
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)